<template>
	<view class="content">
		<div id="mse" class="xgplayer-de"></div>
		<view class="waterfallFlow">
			<view class="waterfallFlow_left" id="left">
				<view class="waterfallFlow_left_content" v-for="(item, index) in waterfallFlowLeftArray"
					:key="item.img">
					<image :src="item.img" mode="" class="img_"></image>
					<view class="introduce">
						{{item.introduce}}
					</view>
					<view class="information">
						<view class="information_left">
							<image :src="item.img" mode="" class="Avatar"></image>
							<view class="name_">
								<view class="top_">
									{{item.name}}
								</view>
								<view class="bottom_">
									{{item.describe}}
								</view>
							</view>
						</view>
						<view class="follow disp" @click="goto">
							关注
						</view>
					</view>
				</view>
			</view>

			<view class="waterfallFlow_left" id="right">
				<view class="waterfallFlow_left_content" v-for="(item, index) in waterfallFlowRightArray"
					:key="item.img">
					<image :src="item.img" mode="" class="img_"></image>
					<view class="introduce">
						{{item.introduce}}
					</view>
					<view class="information">
						<view class="information_left">
							<image :src="item.img" mode="" class="Avatar"></image>
							<view class="name_">
								<view class="top_">
									{{item.name}}
								</view>
								<view class="bottom_">
									{{item.describe}}
								</view>
							</view>
						</view>
						<view class="follow disp" @click="goto">
							关注
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="state.loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	// 	export default {
	// 		data() {
	// 			return {
	// 				title: 'Hello'
	// 			}
	// 		},
	// 		onLoad() {

	// 		},
	// 		methods: {

	// 		}
	// 	}
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'

	import {
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	import Player from 'xgplayer'
	import 'xgplayer/dist/index.min.css'
	let player = ref()

	const instance = getCurrentInstance().proxy;
	const count = ref(0)
	let mse = ref()

	const state = reactive({
		name: "二蛋",
		loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
	})

	let waterfallFlowArray = reactive([{
		img: '/static/waterfallFlow/1.jpeg',
		img_avatar: '/static/waterfallFlow/1.jpeg',
		name: '王二蛋',
		introduce: '今天天气很不错，是一个春游的好日子',
		describe: '闯关、跑酷、休闲'
	}, {
		img: '/static/waterfallFlow/3.png',
		img_avatar: '/static/waterfallFlow/3.png',
		name: '王二蛋',
		introduce: '',
		describe: '闯关、跑酷、休闲'
	}, {
		img: '/static/waterfallFlow/5.jpeg',
		img_avatar: '/static/waterfallFlow/5.jpeg',
		name: '王二蛋',
		introduce: '这个色值在网页设计中经常被用作背景颜色，因为它对眼睛很温和。',
		describe: '闯关、跑酷、休闲'
	}, {
		img: '/static/waterfallFlow/7.webp',
		img_avatar: '/static/waterfallFlow/7.webp',
		name: '王二蛋',
		introduce: '今天天气很不错',
		describe: '闯关、跑酷、休闲'
	}, {
		img: '/static/waterfallFlow/9.webp',
		img_avatar: '/static/waterfallFlow/9.webp',
		name: '王二蛋',
		introduce: '今天天气很不错，是一个春游的好日子',
		describe: '闯关、跑酷、休闲'
	}, {
		img: '/static/waterfallFlow/2.webp',
		img_avatar: '/static/waterfallFlow/2.webp',
		name: '王二蛋',
		introduce: '今天天气很不错，是一个春游的好日子',
		describe: '闯关、跑酷、休闲'
	}, {
		img: '/static/waterfallFlow/4.webp',
		img_avatar: '/static/waterfallFlow/4.webp',
		name: '王二蛋',
		introduce: '检查是否有JavaScript错误',
		describe: '闯关、跑酷、休闲'
	}, {
		img: '/static/waterfallFlow/6.webp',
		img_avatar: '/static/waterfallFlow/6.webp',
		name: '王二蛋',
		introduce: '通过逐一排除可能的原因，你应该能够找到合适的解决方案。',
		describe: '闯关、跑酷、休闲'
	}, {
		img: '/static/waterfallFlow/8.webp',
		img_avatar: '/static/waterfallFlow/8.webp',
		name: '王二蛋',
		introduce: '今天天气很不错，是一个春游的好日子',
		describe: '闯关、跑酷、休闲'
	}, {
		img: '/static/waterfallFlow/10.webp',
		img_avatar: '/static/waterfallFlow/10.webp',
		name: '王二蛋',
		introduce: '检查是否实现了类似于 postcss-pxtorem 的功能。',
		describe: '闯关、跑酷、休闲'
	}])
	let waterfallFlowLeftArray = reactive([])

	let waterfallFlowRightArray = reactive([])

	onMounted(() => {
		console.log('这里是onMounted')
		let inSetCount = 0
		for (let i in waterfallFlowArray) {
			if (inSetCount > 0) {
				waterfallFlowLeftArray.push(waterfallFlowArray[i])
				inSetCount = 0
			} else {
				waterfallFlowRightArray.push(waterfallFlowArray[i])
				inSetCount = 1
			}
		}

		player.value = new Player({
			lang: "zh", //设置中文
			id: 'mse',
			autoplay: true,
			url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
			poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
			playsinline: true,
			ignores: ['replay', 'time', 'definition', 'volume', 'mobile', 'play', 'fullscreen'],
			thumbnail: {
				pic_num: 44,
				width: 160,
				height: 90,
				col: 10,
				row: 10,
				urls: [
					'//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg'
				],
			}
		});
		// window.addEventListener('resize', () => {
		// 	const container = document.getElementById('mse');
		// 	const width = container.clientWidth;
		// 	const height = container.clientHeight;

		// 	player.value.resize(width, height);
		// });
		setTimeout(() => {
			document.querySelector('#mse').children[0].style.height = '100%'
			document.querySelector('#mse').children[0].style.width = '100%'
		})

	})
	let goto = () => {
		console.log('这里是跳转')
		uni.navigateTo({
			url: "../scrollView/scrollView",
		});
	}

	onPullDownRefresh(() => {
		console.log('onPullDownRefresh');
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	// // //上拉触底函数
	onReachBottom(() => {
		console.log('onReachBottom');
	})
	console.log('这里是setup')
</script>

<style lang="scss">
	// ::v-deep .content #mse video {
	// 	height: 500rpx !important;
	// }

	.content {
		width: 100vw;

		#mse {
			width: 100vw !important;
			height: 500rpx !important;
			padding-top: 0 !important;
		}

		.xgplayer-de {
			video {
				width: 100%;
				height: 100%;
				outline: none;
			}
		}

		.waterfallFlow {
			padding: 20rpx;
			display: flex;
			flex-direction: row;

			#left {
				margin-right: 20rpx;
			}

			#right {}

			.waterfallFlow_left {
				width: calc(50% - 10rpx);
				display: flex;
				flex-direction: column;

				.waterfallFlow_left_content {
					display: flex;
					flex-direction: column;

					.img_ {
						border-radius: 20rpx;
						width: 100%;
						// height: auto;
						// display: block;
						// object-fit: contain;
					}

					.introduce {
						font-size: 34rpx;
						color: #000000;
						font-weight: 600;
						margin: 10rpx 4rpx;
					}

					.information {
						margin-top: 10rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.information_left {
							display: flex;
							flex-direction: row;

							.Avatar {
								border-radius: 20rpx;
								width: 60rpx;
								height: 60rpx;
								margin-right: 10rpx;
							}

							.name_ {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: flex-start;

								.top_ {
									font-size: 28rpx;
									color: #000000;
								}

								.bottom_ {
									font-size: 24rpx;
									color: #666666;
								}
							}
						}

						.follow {
							width: 58rpx;
							height: 48rpx;
							font-size: 28rpx;
							padding: 0 10rpx;
							flex-direction: row;
							border-radius: 40rpx;
							background: #e7eddd;
							color: #A2CD5A;
						}
					}
				}
			}
		}


	}
</style>